﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>铅笔工具及基本用户界面测试</title>
    <link href="StyleCss/StyleCss1.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.8.3.js"></script>
    <script src="Scripts/common.js"></script>
</head>
<body>
    <div id="desktopLayer">
    </div>
    <canvas id="desktopCanvas" height="650" width="996" class="desktopCanvas">当前WEB应用适用HTML5标准，您现在使用的浏览器不支持HTML5标准，请改用使用支持HTML5标准的浏览器访问此应用！<br />
        根据您的设备和操作系统，推荐如下浏览器：<a href="http://html5test.com/results/desktop.html">PC桌面浏览器</a>、<a href="http://html5test.com/results/mobile.html">手机等手持式终端设备</a><br />
        <img src="Images/html5logo.png" />
    </canvas>
    <%--工具箱开始--%>
    <div id="toolboxLayer">
        <div id="toollistLayer">
            <div title="常用工具:铅笔(随手画)" class="toolTitle">
                <img src="Images/tool-default.png" />常用工具
            </div>
            <div class="toolContent">
                <img title="铅笔工具" class="toolImgButton" src="Images/tool-pencil.png" />
                <img title="文字工具" class="toolImgButton" src="Images/tool-text.png" />
            </div>
            <div title="数学工具:各种基本图形、圆规、直尺、量角器等" class="toolTitle">
                <img src="Images/tool-math.png" />数学工具
            </div>
            <div class="toolContent">
                <img title="三角形工具" class="toolImgButton" src="Images/tool-triangle.png" />
                <img title="圆形工具" class="toolImgButton" src="Images/tool-circle.png" />
                <img title="长方形工具" class="toolImgButton" src="Images/tool-trectangle.png" />
            </div>
        </div>
        <div id="switchLayer" onclick="switchToolBox();" title="展开/折叠工具箱">
            <img id="switchImg" src="Images/switchbutton-2.gif" />
        </div>
    </div>
    <%--工具箱结束--%>
    <div style="top: 700px; left: 50px;">
        <p>鼠标位于坐标： <span></span>.</p>
    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        InitApp();
    });

    //初始化应用
    function InitApp() {
        InitAppLayer();
        $(".toolTitle").bind("click", showToolContent);
        $(".toolImgButton").bind("click", selectTool);
        $("#desktopCanvas").bind("mousemove mousedown mouseup", function (event) { routeSelectTool(event); });
        //$("#desktopCanvas").bind("mousedown", function (e) { pencilMouseDown(e); });
        //$("#desktopCanvas").bind("mouseup", function (e) { pencilMouseUp(e); });

    }

    //初始化应用层
    function InitAppLayer() {
        var initLayer = new GlobalConst();
        setLayer("desktopLayer", initLayer.ZIndex_DesktopLayer);
        setLayer("desktopCanvas", initLayer.ZIndex_DesktopCanvas);
        setLayer("toolboxLayer", initLayer.ZIndex_ToolBoxLayer);
        setLayer("toollistLayer", initLayer.ZIndex_ToolListLayer);
        setLayer("switchLayer", initLayer.ZIndex_SwitchLayer);
    }

    //展开/折叠工具箱
    function switchToolBox() {
        $("#toollistLayer").toggle();
        if ($("#switchLayer").css("left") == "0px") {
            $("#switchLayer").css("left", "138px");
            $("#switchImg").attr("src", "Images/switchbutton-1.gif");
        }
        else {
            $("#switchLayer").css("left", "0px");
            $("#switchImg").attr("src", "Images/switchbutton-2.gif");
        }
    }

    //显示工具箱中工具（展开/折叠动画显示）
    function showToolContent() {
        $(".toolContent").hide(150);
        $(this).next("div").toggle(150);
    }

    function selectTool() {
        selectToolTitle = $(this).attr("title");
        switchToolBox();
    }

    //测试动态创建CANVAS函数，暂时无需理会
    function testcreatecanvas() {
        //动态建立Canvas元素（parentID:父ID名，selfID:自己的ID，width:宽度，height:高度，top:上边界，left:左边界，color背景色）
        var mycanvas = {
            parentID: "body",
            selfID: "mycanvas",
            width: 300,
            height: 300,
            top: 200,
            left: 200,
            color: "rgba(0, 0, 0, 0.05)"
        }
        createCanvas(mycanvas);
        setLayer("mycanvas", const_UserCustomLayer + 1);
        switchToolBox();
    }

    function redrawPencil(canvasID) {
        var canvas = $("#" + canvasID);
        var ctx = canvas.get(0).getContext("2d");
        ctx.clearRect(0, 0, 996, 650);
        ctx.strokeStyle = "#0000ff";//画笔演示
        ctx.lineWidth = 5;//线条宽度
        ctx.lineCap = "round";//笔头形状
        ctx.lineJoin = "round";//转角形状
        for (var i = 0; i < mouseX.length; i++) {
            ctx.beginPath();
            if (isMouseDrag[i]) {
                ctx.moveTo(mouseX[i - 1], mouseY[i - 1]);
                ctx.lineTo(mouseX[i], mouseY[i]);
            } else {
                ctx.arc(mouseX[i], mouseY[i], 0.5, 0, 2 * Math.PI, true);
            }
            ctx.closePath();
            ctx.stroke();
        }
    }

    var worker = function () {
        this.workPencil = function () {

        }
    }

    function routeSelectTool(event) {
        if (selectToolTitle == "铅笔工具") {
            if (event.type == "mousedown") {
                pencilMouseDown(event);
            } else if (event.type == "mouseup") {
                pencilMouseUp(event);
            } else if (event.type == "mousemove") {
                pencilMouseMove(event);
            }
        }
    }

    function addPoint(pointX, ponitY, isDrag) {
        mouseX.push(pointX);
        mouseY.push(ponitY);
        isMouseDrag.push(isDrag);
    }

    function pencilMouseDown(event) {
        isPainting = true;
        addPoint(event.pageX, event.pageY, false);
        redrawPencil("desktopCanvas");
    }

    function pencilMouseUp(event) {
        isPainting = false;
        redrawPencil("desktopCanvas");
    }

    function pencilMouseMove(event) {
        if (isPainting) {
            addPoint(event.pageX, event.pageY, true);
            $("span").html(event.pageX + "." + event.pageY);
            redrawPencil("desktopCanvas");
        }
    }
</script>